<template>
	<view class="container">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="comment" v-for="(item, index) in messages">
				<view class="left">
					<!-- 					<image :src="item.user.picture" mode="aspectFill"></image> -->
					<image src="@/static/2.jpg" mode="aspectFill"></image>
					<view class="name">
						<text>{{item.user.nickName}}</text>
					</view>
				</view>
				<!-- 					<view class="content">
						{{ item.content }}
					</view> -->
				<view class="content" v-if="item.image == null">
					<text>{{ item.content }}</text>
				</view>
				<view class="content" v-else>
					<text>{{ item.content }}</text>
					<image :src="item.image"></image>
				</view>
				<view>
					<view class="bottom">
						{{ item.createTime }}
						<view class="reply" v-if="item.toRid != null"
							@tap="tz('/pages/toreply/toreply?toRid=',item.rid)">
							回复
						</view>
						<view class="reply" v-else @tap="tz('/pages/toreply/toreply?toRid=',item.toRid)">
							回复
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="beneath">
			<view class="message">
				<input type="text" v-model="text" />
				<image src="@/static/picture.png" @click="chooseImage"></image>
				<view class="send" @click="send">
					<text>发送</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				id: '',
				replyList: {},
				text: '',
				image: '',
				state: 0,
				toRid: '',
				/* 为 0 评论内容不包含图片，为 1 评论内容包含图片*/
				Addstate: {},
				messages: []
			}
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		onLoad: function(option) {
			this.toRid = option.toRid;
			console.log(this.toRid);
		},
		onShow() {
			console.log(this.id);
			if (this.id == "") {
				this.queryToRid(this.toRid);
			} else {
				this.queryCid(this.id);
			}

		},
		methods: {
			upper: function(e) {},
			lower: function(e) {},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			queryToRid(id) {
				console.log(id);
				uni.request({
					url: 'http://127.0.0.1:800/mhs/reply/queryToRid?id=' + id, //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.messages = res.data.data;
						console.log(this.messages);
					},
				});
			},
			chooseImage() {
				uni.chooseImage({
					count: 6, //默认9
					success: function(res) {
						this.image = res.tempFilePaths[0]
						console.log(this.image)
						uni.setStorageSync('image', this.image)
						this.image = uni.getStorageSync('image')
						console.log(this.image)
						console.log(999999999999)
					}
				});

			},
			send() {
				if (this.text == "") {
					return
				}
				if (!!uni.getStorageSync('image')) {
					this.image = uni.getStorageSync('image')
					console.log(this.image);
					console.log(6666666666)
				}
				console.log(this.image);
				uni.request({
					url: 'http://127.0.0.1:800/mhs/reply/addReplys?content=' + this.text +
						"&toRid=" + this.toRid + "&image=" + this.image, //仅为示例，并非真实接口地址。
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						this.Addstate = res.data.data;
						// this.messages.push(this.Addstate)
						console.log(this.Addstate);
						this.text = "";
						this.queryToRid(this.toRid)
					},
				});
				// queryToRid

				// this.$router.go(0);
			},
			tz(detail, id) {
				uni.navigateTo({
					// '/pages/bookDetail/bookDetail?id='
					// console.log(detail),
					url: detail + id,
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #F5F5F5;
	}

	.scroll-Y {
		width: 750rpx;
		height: 90vh;
	}

	.comment {
		display: flex;
		flex-direction: column;
		-webkit-overflow-scrolling: touch;
		overflow-y: scroll;
		margin-top: 1vh;
	}

	.left {
		display: flex;
	}

	.name {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


	.name text {
		margin-left: 10px;
	}

	.content {
		display: flex;
		flex-direction: column;
		margin-left: 15vw;
		margin-bottom: 2vh;
	}

	.content text {
		/* 		width: 50%; */
		max-width: 50vw;
		padding: 1vh;
		border: 0px;
		outline: none;
		font-size: 18px;
		/* 		background-color: #C0C0C0; */
	}

	.content image {
		margin-top: 1vh;
		width: 30vw;
		height: 15vh;
	}

	.left image {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.bottom {
		display: flex;
		margin-left: 15vw;
	}

	.reply {
		margin-left: 10px;
		color: #939EF0;
	}

	.beneath {
		border-top: 1px solid;
		width: 100vw;
		height: 10vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: auto;
		position: absolute;
		bottom: 0px;
		background-color: #F5F5F5;
	}

	.message {
		display: flex;
		justify-content: space-around;
	}

	.message input {
		height: 33px;
		width: 50%;
		border: 0px;
		outline: none;
		background-color: #ffffff;
	}

	.message image {
		width: 38px;
		height: 38px;
	}

	.message view {
		text-align: center;
		border: 1px solid;
		border-radius: 7%;
		height: 33px;
		width: 80px;
		background-color: green;
		color: #ffffff;
	}

	.beneath {
		border-top: 1px solid;
		width: 100vw;
		height: 10vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		bottom: 0;
	}

	.message {
		display: flex;
		justify-content: space-around;
	}

	.message input {
		height: 33px;
		width: 50%;
		border: 0px;
		outline: none;
		background-color: #ffffff;
	}

	.message image {
		width: 38px;
		height: 38px;
	}

	.send {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid;
		border-radius: 7%;
		height: 33px;
		width: 80px;
		background-color: green;
	}

	.send text {

		color: #ffffff;
	}
</style>